import React from 'react'
import { useNavigate } from 'react-router-dom'

function Index(props) {
    let {data1}=props 
    console.log('data',data1)
    const navigate=useNavigate()
    const goDeatil=(item)=>{
         let url = `/detail/${item.id}`
         navigate(url,{
            state:item
         }) 
    }
  return (
    <div>
      {
         data1.map(item=>{
            return  <dl key={item.id} className='list' onClick={()=>goDeatil(item)}>
         <dt className='list_left'>
            <img src={item.url} alt=""  style={{width:'100%',height:'200px'}} />
         </dt>
         <dd className='list_right'>
             <h4>{item.name}</h4>
             <h4>{item.title}</h4>
             <h4>￥{item.price}</h4>
         </dd>
      </dl>
         })
      }
    </div>
  )
}

export default Index
